<template>
  <div id="viewQuestionView">
    <a-row class="grid-demo" :gutter="24">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="通过率">
                  {{
                    `${
                      question.submitNum
                        ? (
                            (question.acceptedNum * 100) /
                            question.submitNum
                          ).toFixed(2)
                        : "0"
                    }%`
                  }}
                </a-descriptions-item>
                <a-descriptions-item label="时间限制">
                  {{ question.judgeConfig.timeLimit / 1000 ?? 0 }}秒
                </a-descriptions-item>
                <a-descriptions-item label="空间限制">
                  {{ question.judgeConfig.memoryLimit ?? 0 }}M
                </a-descriptions-item>
              </a-descriptions>
              <MdViewer :value="question.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" disabled title="评论"> 评论为空</a-tab-pane>
          <a-tab-pane key="answer" disabled title="题解"> 题解为空</a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12">
        <a-row style="margin-bottom: 10px">
          <a-col :span="12">
            <a-space>
              <text style="font-size: 16px">编程语言：</text>
              <a-select
                v-model="form.language"
                style="width: 160px"
                placeholder="请选择语言"
                :trigger-props="{ autoFitPopupMinWidth: true }"
              >
                <a-option v-for="(item, index) in languageOptions" :key="index"
                  >{{ item }}
                </a-option>
              </a-select>
            </a-space>
          </a-col>
          <a-col :span="12">
            <a-space>
              <text style="font-size: 16px">字体大小：</text>
              <a-select
                v-model="fontSize"
                style="width: 160px"
                placeholder="请选择语言"
                :trigger-props="{ autoFitPopupMinWidth: true }"
              >
                <a-option
                  v-for="(item, index) in fontSizeOptions"
                  :key="index"
                  :value="item.value"
                  >{{ item.text }}
                </a-option>
              </a-select>
            </a-space>
          </a-col>
        </a-row>
        <CodeEditor
          :value="form.code"
          :language="form.language"
          :handle-change="changeCode"
          :font-size="fontSize"
        />
        <a-divider size="0" />
        <div class="submitStatus">
          <div class="statusInfo">
            <a-space>
              <text style="font-size: 18px" v-if="isSubmit"
                >代码提交状态：
              </text>
              <text :style="{ fontSize: '20px', color: statusInfoColor }"
                >{{ statusInfo }}
              </text>
              <a-spin v-if="isJudge" size="26" />
            </a-space>
          </div>
          <a-button
            type="primary"
            style="min-width: 100px"
            @click="doSubmit"
            :disabled="isJudge"
          >
            提交代码
          </a-button>
        </div>
        <div class="errorMessage" v-if="errorMessage">
          {{ errorMessage.replace(/\\/g, "/") }}
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";
import { ref, withDefaults, defineProps, onMounted, watch } from "vue";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const isJudge = ref(false);
const isSubmit = ref(false);
const statusInfo = ref("");
const errorMessage = ref("");
const question = ref<QuestionVO>();
const statusInfoColor = ref("");

watch(statusInfo, (newValue) => {
  if (newValue === "Accepted") {
    statusInfoColor.value = "green";
  } else if (newValue === "Judging") {
    statusInfoColor.value = "#185EFF";
  } else {
    statusInfoColor.value = "red";
  }
});

const loadData = async () => {
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("加载失败, " + res.message);
  }
};

onMounted(() => {
  loadData();
});

const languageOptions = ["java", "cpp", "python"];
const fontSizeOptions = [
  {
    value: 12,
    text: "12px",
  },
  {
    value: 13,
    text: "13px",
  },
  {
    value: 14,
    text: "14px",
  },
  {
    value: 15,
    text: "15px",
  },
  {
    value: 16,
    text: "16px",
  },
  {
    value: 17,
    text: "17px",
  },
  {
    value: 18,
    text: "18px",
  },
  {
    value: 19,
    text: "19px",
  },
  {
    value: 20,
    text: "20px",
  },
  {
    value: 21,
    text: "21px",
  },
];
const fontSize = ref(18);

const form = ref<QuestionSubmitAddRequest>({
  language: "java",
  code: `// 请不要修改类名，类名必须为Main
public class Main {
    public static void main(String[] args) {

    }
}`,
});

/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }
  isSubmit.value = true;
  statusInfo.value = "Judging";
  isJudge.value = true;
  const res = await QuestionControllerService.doQuestionSubmitUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (res.code === 0) {
    // message.success("提交成功");
    console.log(res.data);
    statusInfo.value = res.data.judgeInfo.message;
    // console.log(res.data.judgeInfo);
    errorMessage.value = res.data.judgeInfo.errorMessage;
    isJudge.value = false;
  } else {
    message.error("提交失败, " + res.message);
    isJudge.value = false;
    statusInfo.value = "submit failed";
  }
};

const changeCode = (value: string) => {
  form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  max-width: 95%;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
  user-select: none;
}

.submitStatus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.errorMessage {
  margin-top: 16px;
  font-size: 16px;
  color: red;
  white-space: pre-wrap;
  font-family: monospace;
}
</style>
